<template>
  <div class="magic-view">
    <div class="container">
      <div class="container-box">
        <div class="cube-side side-front">
          <div class="cube-grid" style="--c: var(--c1)"></div>
        </div>
        <div class="cube-side side-back">
          <div class="cube-grid" style="--c: var(--c2)"></div>
        </div>
        <div class="cube-side side-right">
          <div class="cube-grid" style="--c: var(--c3)"></div>
        </div>
        <div class="cube-side side-left">
          <div class="cube-grid" style="--c: var(--c4)"></div>
        </div>
        <div class="cube-side side-top">
          <div class="cube-grid" style="--c: var(--c5)"></div>
        </div>
        <div class="cube-side side-bottom">
          <div class="cube-grid" style="--c: var(--c6)"></div>
        </div>
      </div>
    </div>
    <div style="border: 1px solid #4bbbde; margin-top: 80px;width: 100%;"></div>
    <div class="box-card">
      <div class="box1 box">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c3">3</div>
        <div class="c4">4</div>
        <div class="c5">5</div>
        <div class="c6">6</div>
      </div>
      <div class="box2 box">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c3">3</div>
        <div class="c4">4</div>
        <div class="c5">5</div>
        <div class="c6">6</div>
      </div>
      <div class="box3 box">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c3">3</div>
        <div class="c4">4</div>
        <div class="c5">5</div>
        <div class="c6">6</div>
      </div>
      <div class="box4 box">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c3">3</div>
        <div class="c4">4</div>
        <div class="c5">5</div>
        <div class="c6">6</div>
      </div>
    </div>

    <div class="box-btn">
      <el-button type="primary"@click="router.go(-1)">⏪ GoBack</el-button>
      <el-button type="primary"@click="router.push('/white')">五子棋 ⏏️</el-button>
      <el-button type="primary"@click="router.push('/face')">GoFace ⏩</el-button>
    </div>
  </div>


</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()



</script>

<style>
.magic-view {
  width: 1500px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:root {
  --bg: #181818;
  --c1: #ffce28;
  --c2: #1bb5f3;
  --c3: #ffffff;
  --c4: #1efa1e;
  --c5: #ec1515;
  --c6: #fa9003;
  --w: 30px;
  --gap: 8px; /* 边框间隔 */
  --allW: calc(3 * var(--w) + 4 * var(--gap)); /* 所有边框的宽度 */
}

.container {
  width: var(--allW);
  height: var(--allW);
  perspective: 900px;
}

.container-box {
  position: relative;
  width: var(--allW);
  height: var(--allW);
  transform-style: preserve-3d;
  animation: rotate 10s infinite alternate; /* 旋转动画 */
}

.cube-side {
  width: 100%;
  height: 100%;
  position: absolute;
  background: var(--bg);
  border-radius: 7px;
  padding: var(--gap);
   /* 背面不可见 */
  backface-visibility: hidden;
}

.cube-side .cube-grid {
  width: var(--w);
  height: var(--w);
  border-radius: calc(var(--w) / 5);
  color: var(--c);
  background: currentColor;
  box-shadow: calc(var(--w) + var(--gap)) 0 0 currentColor,
  calc(var(--w) * 2 + var(--gap) * 2) 0 currentColor,
  0 calc(var(--w) + var(--gap)) currentColor,
  calc(var(--w) + var(--gap)) calc(var(--w) + var(--gap)) currentColor,
  calc(var(--w) * 2 + var(--gap) * 2) calc(var(--w) + var(--gap)) currentColor,
  0 calc(var(--w) * 2 + var(--gap) * 2) currentColor,
  calc(var(--w) + var(--gap)) calc(var(--w) * 2 + var(--gap) * 2) currentColor,
  calc(var(--w) * 2 + var(--gap) * 2) calc(var(--w) * 2 + var(--gap) * 2) currentColor;
}

.cube-side.side-front {
  transform: translateZ(calc(var(--allW) / 2));
}

.cube-side.side-back {
  transform: rotateX(-180deg) translateZ(calc(var(--allW) / 2));
}

.cube-side.side-right {
  transform: rotateY(90deg) translateZ(calc(var(--allW) / 2));
}

.cube-side.side-left {
  transform: rotateY(-90deg) translateZ(calc(var(--allW) / 2));
}

.cube-side.side-top {
  transform: rotateX(90deg) translateZ(calc(var(--allW) / 2));
}

.cube-side.side-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--allW) / 2));
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }
  15% {
    transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg);
  }
  30% {
    transform: rotateZ(45deg) rotateX(90deg) rotateY(90deg);
  }
  45% {
    transform: rotateZ(45deg) rotateX(135deg) rotateY(135deg);
  }
  60% {
    transform: rotateZ(45deg) rotateX(90deg) rotateY(180deg);
  }
  75% {
    transform: rotateZ(45deg) rotateX(45deg) rotateY(225deg);
  }
  100% {
    transform: rotateZ(45deg) rotateX(0deg) rotateY(270deg);
  }
}

.box-card {
  width: 100%;
  height: 500px;
  margin-top: 80px;
  box-shadow: 0 0 50px #1fb9f6;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  width: 200px;
  height: 200px;
  margin: auto;
  transform-style: preserve-3d; /* 形成3d空间 */
  transition: 2s; /* 为了过度看起来更舒服 */
  perspective-origin: 150% 50%; /* 设置视点 */
  perspective: 1000px; /* 设置视距 */
}

.box2 {
  width: 200px;
  height: 200px;
  margin: auto;
  transform-style: preserve-3d;
  perspective-origin: 200% 200%;
  perspective: 1000px;
}

.box3 {
  width: 200px;
  height: 200px;
  margin: auto;
  transform-style: preserve-3d;
  perspective-origin: 300%;
  perspective: 1000px;
}

.box4 {
  width: 200px;
  height: 200px;
  margin: auto;
  transform-style: preserve-3d;
  perspective-origin: -200%;
  perspective: 1000px;
}

.box div {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 150px;
  font-weight: bolder;
  color: aliceblue;
  position: absolute;
  /* 让6个面全部绝对定位在父元素里面 */
  left: 0;
  top: 0;
  border: 2px solid #727070;
}

.c1 {
  /* 第一个面往前走 */
  background: rgba(255, 121, 88, 0.55);
  transform: translateZ(100px);
}

.c2 {
  /* 第二个面往后走 */
  background: rgba(21, 248, 78, 0.67);
  transform: translateZ(-100px) rotateY(180deg); /*rotateY(180deg)  让正面朝外*/
}

/* 第三个面往左走 */
.c3 {
  background: rgba(163, 4, 243, 0.54);
  transform: translateX(-100px) rotateY(-90deg);
}

/* 第四个面往右走*/
.c4 {
  background: rgba(4, 245, 203, 0.58);
  transform: translateX(100px) rotateY(90deg);
}

/* 第五个面往上走*/
.c5 {
  background: rgb(20, 195, 248);
  transform: translateY(-100px) rotateX(90deg);
}

/* 第六个面往下走*/
.c6 {
  background: rgba(235, 255, 23, 0.65);
  transform: translateY(100px) rotateX(-90deg);
}

.box-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  .el-button {
    background-color: #f58383;
    border-radius: 10px;
    padding: 25px 15px;
    color: #fff;
    height: 50px;
    font-size: 24px;
    font-weight: bold;
    border: none;
  }
}

</style>